<template>
  <n-tabs
    class="card-tabs"
    :default-value="tabList[0].name"
    size="large"
    animated
    @update:value="changeTab"
    style="margin: 0 -4px;height: 100%;"
    pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
  >
    <n-tab-pane
      v-for="{ name, type } in tabList"
      :key="name"
      :name="name"
      :tab="name"
    >
      <div class="flex">
        <!-- 左侧树形菜单 -->
        <div class="tree-list">
          <n-tree
            block-line
            :data="treeList"
            :default-expanded-keys="defaultExpandedKeys"
            key-field="key"
            label-field="label"
            children-field="children"
            selectable
          />
          <div class="add-btn">
            <n-button
              type="primary"
              block
              secondary
              strong
              @click="addList(type)"
              >新增一级{{ name }}</n-button
            >
          </div>
        </div>
        <!-- 右侧表单 -->
        <route-com class="form-box"></route-com>
      </div>
    </n-tab-pane>
  </n-tabs>
</template>

<script>
import { provide, reactive, toRefs, defineAsyncComponent, readonly } from "vue";
export default {
  components: {
    routeCom: defineAsyncComponent(() => import("./components/route-com.vue"))
  },

  setup() {
    const data = reactive({
      tabList: [
        { name: "路由", type: 1 },
        { name: "api", type: 2 },
        { name: "组件库", type: 3 },
        { name: "按钮", type: 4 }
      ],
      // 树形菜单
      defaultExpandedKeys: ["40", "41"],
      treeList: JSON.parse(localStorage.getItem("route")),
      ruleForm: {},
      // 当前选中标签
      propObj: {
        type: "路由"
      }
    });

    // 给子组件通信
    provide("propObj", data.propObj);
    
    // 方法
    const methods = {
      // 新增
      addList: () => {},
      // 切换tab
      changeTab: e => {
        data.propObj.type = e;
        if (e == "路由") {
          data.treeList = JSON.parse(localStorage.getItem("route"));
        }
      }
    };

    return {
      ...toRefs(data),
      ...toRefs(methods)
    };
  }
};
</script>

<style scoped lang="scss">
.card-tabs .n-tabs-nav--bar-type {
  padding-left: 4px;
}
.card-tabs {
  height: 100%;
  .flex {
    height: 100%;
  }
  .tree-list {
    position: relative;
    width: 300px;
    min-height: 500px;
    height: 100%;
    border: 1px solid #eee;
    margin-right: 30px;
    .add-btn {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .form-box {
    width: 100%;
    padding: 40px;
    border: 1px solid #eee;
  }
  ::v-deep .n-tabs-pane-wrapper {
    height: calc(100% - 44px);
  }
  ::v-deep .n-tab-pane {
    height: 100%;
  }
}
</style>
